import React, { Component } from 'react'

export default class MealList extends Component {
   
  
   componentDidMount(){
       let that=this;
       window.onscroll=function(){
         

            // 获取所有item元素
           let items=document.getElementsByClassName('item');
           for(let i=0;i<items.length;i++){
               items[i].className="item";
           }
          
        
           
          // 计算当前tab的index
          let index= that.props.getTabIndex(document.documentElement.scrollTop,that.props.meal_position_arr);
          items[index].className="item active";

       }
    
   }

    render() {
        return (
            <div >
               {this.props.meal_list.map((cate,i)=>{
                   return <div key={i}>
                           <h3 id={i}>{cate.cate}</h3>
                           {cate.children.map((v,j)=>{
                               return <div key={j}>
                                   {v.title}
                                  
                                   <br/>
                                   <img src={v.image}  alt=""/> <br/>
                                   价格：{v.price} 元<br/>
                                    <button>-</button> {v.num}  <button>+</button>
                                    <hr/>
                               </div>
                               
                           })}
                         
                   </div>
               })}
            </div>
        )
    }
}
